<template>
<!-- 五防钥匙箱详情 -->
  <div class="info-details-page">
    <div class="info-details-page-title endbox">
      <div class="left">
        <span class="iconfont iconsuojuguanli_huaban"></span>
        <span>锁具管理</span>
        <span>></span>
        <span>五防锁具管理</span>
      </div>
      <div class="back" @click="goBack"></div>
    </div>
    <!-- form表单 -->
    <div class="info-details-page-top bigTableStyle">
      <topFormTime @queryForm="queryForm" v-if="moduleFlag === 1"/>
      <topForm @queryForm="queryForm" v-if="moduleFlag === 2"/>
    </div>
    <!-- 中间的饼图柱图 -->
    <div class="info-details-page-middle" v-if="moduleFlag === 2">
      <FiveKeyDetails :formData="formData" />
    </div>
    <!-- 下面的开锁记录 -->
    <div
      class="info-details-page-bottom"
      :class="{'chang-he1':rouName === '统计','chang-he2':rouName === '查询'}"
    >
      <equipmentSize ref="reftable" :formData="formData"/>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import topFormTime from "./components/topFormTime.vue"
import topForm from "./components/topForm.vue"

import equipmentSize from "./components/equipmentSize.vue";
import FiveKeyDetails from "./components/FiveKeyDetails.vue";
@Component({
  components: {
    topFormTime,
    topForm,
    equipmentSize,
    FiveKeyDetails,
  },
})
export default class infoDetailsPage extends Vue {
  public goBack(val: string) {
    this.$router.push("/locks/KeyBoxPage");
  }
  rouName: any = "";
  moduleFlag: number = 0;
  changModule() {
    this.rouName = this.$route.query.name;
    if (this.rouName === "查询") {
      this.moduleFlag = 1;
    } else {
      this.moduleFlag = 2;
    }
  }
  mounted(): void {
    this.changModule();
  }
  // 表单查询的参数
  formData = {
    voltageLevel:'',
    keyFirm:'',
    reasonCode:'',
    bdzid: '',
    content:'',
    strtimeedntime:[]
  };
  queryForm(val) {
    this.formData = val;
    console.log(this.formData);
    (this.$refs as any).reftable.fetch()
  }
}
</script>

<style lang="scss" scoped>
.info-details-page {
  width: 100%;
  height: 100%;
  &-title {
    width: 100%;
    height: 0.26rem;
    margin-bottom: 0.18rem;
    box-sizing: border-box;
    > div {
      font-size: 0.2rem;
      > span {
        font-size: 0.2rem;
      }
    }
    .left {
      width: 100%;
    }
    .back {
      width: 0.9rem;
      height: 0.3rem;
      background: url("../../../../assets/img/return.png") no-repeat center
        center;
      background-size: 100% 100%;
      cursor: pointer;
    }
  }
  &-top {
    width: 18.67rem;
    height: 0.36rem;
  }
  &-middle {
    width: 18.67rem;
    height: 4.24rem;
  }
  &-bottom {
    width: 18.67rem;
  }
  .chang-he1 {
    height: calc(100% - 5.04rem);
  }
  .chang-he2 {
    height: calc(100% - 1.1rem);
    margin-top: 0.2rem;
  }
}
</style>